<template>
  <Card>
    <Row>
      <Col span="4">
        <Button type="primary" size="large" @click="dictModal.addModal=true">添加字典</Button>
        <Button size="large">更多操作</Button>
        <Alert show-icon>当前选择</Alert>
        <Input placeholder="输入搜索字典"></Input>
        <List style="margin-top: 10px">
          <ListItem>{{}}</ListItem>
          <ListItem>This is a piece of text.</ListItem>
          <ListItem>This is a piece of text.</ListItem>
        </List>
      </Col>
      <Col span="18" offset="1">
        <Button size="large" type="primary" icon="md-add">添加用户</Button>
        <Button size="large" icon="md-trash">批量删除</Button>
        <Dropdown>
          <Button size="large">
            更多操作
            <Icon type="ios-arrow-down"></Icon>
          </Button>
          <DropdownMenu slot="list">
            <DropdownItem>刷新</DropdownItem>
            <DropdownItem>重置用户密码</DropdownItem>
            <DropdownItem>导出所选数据</DropdownItem>
            <DropdownItem> 导出全部数据</DropdownItem>
            <DropdownItem>导入数据</DropdownItem>
          </DropdownMenu>
        </Dropdown>
        <Button size="large" type="dashed">关闭搜索</Button>
        <Button size="large" type="dashed">关闭提示</Button>
        <!--        <Alert show-icon>已选择 <a>{{selectCount}}</a> 项 <a @click="clear">清空</a></Alert>-->
        <Table :columns="columns1" ref="table" :data="data1" border draggable size="large">
          <template slot-scope="{ row, index }" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">View</Button>
            <Button type="error" size="small" @click="remove(index)">Delete</Button>
          </template>
        </Table>
        <div style="margin: 10px;overflow: hidden">
          <div style="float: right;">
            <Page :total="40" show-elevator show-sizer/>
          </div>
        </div>
      </Col>
    </Row>
    <Modal v-model="dictModal.addModal" title="添加字典" draggable>
      <Form ref="dict" :model="dict" :label-width="70">
        <FormItem label="字典名称" prop="title">
          <Input v-model="dict.title"></Input>
        </FormItem>
        <FormItem label="字典类型" prop="type">
          <Input v-model="dict.type"></Input>
        </FormItem>
        <FormItem label="备注" prop="common">
          <Input v-model="dict.common"></Input>
        </FormItem>
        <FormItem label="排序值" prop="sortOrder">
          <InputNumber v-model="dict.sortOrder" :max="100" :min="0"></InputNumber>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="()=>{dictModal.addModal=false;this.$refs.dict.resetFields();}">取消</Button>
        <Button type="primary" @click="saveDict">提交</Button>
      </div>
    </Modal>
  </Card>
</template>

<script>
import { addDict, listDictByPage, deleteDictById } from '@/api/user-api'

export default {
  name: 'dictionary-list',
  data () {
    return {
      dictModal: {
        addModal: false
      },
      dict: {
        'title': '',
        'type': '',
        'sortOrder': 0,
        'common': ''
      },
      dropDownIcon: 'ios-arrow-down',
      columns1: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left',
          ellipsis: true
        },
        {
          title: 'Name',
          key: 'name',
          sortable: true,
          ellipsis: true,
          width: 150
        },
        {
          title: 'Age',
          key: 'age',
          sortable: true,
          ellipsis: true,
          width: 150
        },
        {
          title: 'Age',
          key: 'age',
          sortable: true,
          ellipsis: true,
          width: 150
        },
        {
          title: 'Age',
          key: 'age',
          sortable: true,
          ellipsis: true,
          width: 150
        },
        {
          title: 'Age',
          key: 'age',
          sortable: true,
          ellipsis: true,
          width: 150
        },
        {
          title: 'Age',
          key: 'age',
          sortable: true,
          ellipsis: true,
          width: 150
        },
        {
          title: 'Address',
          key: 'address',
          width: 150,
          filters: [{
            label: '单名',
            value: 1
          }, {
            label: '多名',
            value: 2
          }],
          filterMultiple: false,
          filterMethod (value, row) {
            if (value === 1) {
              return row.age > 25
            } else if (value === 2) {
              return row.age < 25
            }
          }
        }, {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center',
          fixed: 'right'
        }
      ],
      data1: [
        {
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park',
          date: '2016-10-03'
        },
        {
          name: 'Jim Green',
          age: 24,
          address: 'London No. 1 Lake Park',
          date: '2016-10-01'
        },
        {
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park',
          date: '2016-10-02'
        },
        {
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          date: '2016-10-04'
        }
      ]
    }
  },
  created () {

  },
  methods: {
    saveDict () {
      addDict(this.dict).then(res => {
        this.$Message.success(res.msg)
        this.$refs.dict.resetFields()
        this.dictModal.addModal = false
      })
    }
  }
}
</script>

<style scoped>

</style>
